<template>
	<div class="home">
		<!-- 搜索组件 -->
		<SearchView></SearchView>
		<!-- 列表 -->
		<div class="tabulation">
			<div class="item" v-for="l in list.slice(0,1)" :key="l['_system_record_entry_id']">
				<div class="img" @click="gotoresult(l.title)" >
					<img :src="l.image" alt="">
				</div>
				<p>{{ l.title }}</p>
			</div>
			<div class="item" v-for="l in list.slice(3,4)" :key="l['_system_record_entry_id']">
				<div class="img" @click="gotoresult(l.title)"  >
					<img :src="l.image" alt="">
				</div>
				<p>{{ l.title }}</p>
			</div>
			<div class="item" v-for="l in list.slice(2,3)" :key="l['_system_record_entry_id']">
				<div class="img" @click="gotoresult(l.title)" >
					<img :src="l.image" alt="">
				</div>
				<p>{{ l.title }}</p>
			</div>
			<div class="item" v-for="l in list.slice(4,10)" :key="l['_system_record_entry_id']">
				<div class="img" @click="gotoresult(l.title)" >
					<img :src="l.image" alt="">
				</div>
				<p>{{ l.title }}</p>
			</div>
			<div class="item" v-for="l in list.slice(11,12)" :key="l['_system_record_entry_id']">
				<div class="img" @click="gotoresult(l.title)" >
					<img :src="l.image" alt="">
				</div>
				<p>{{ l.title }}</p>
			</div>
		</div>
		<div class="navigation">
			<div class="left" >
				<div class="ited" v-for="a in ListLeft" :key="a.Id" @click="gotoVideo(a)">
					<div class="top">
						<van-image class="img" width="100" :src="a.itemImage" />
						<van-image class="direct_seeding" width="44" height="36" :src="a?.lefttop_taglist[0]?.img" />
						<van-image
							class="broadcast"
							width="28"
							height="28"
							src="https://s10.mogucdn.com/mlcdn/c45406/190717_0a48k9jegh3a0gg2gfgaf3j24bij0_84x84.png"
						/>
						<div class="img-but">
							<van-image class="img-but-tu" width="17.4" height="17.4" :src="a.actorAvatar" />
							<span class="img-but-text">{{ a.actorName }}</span>
							<p class="img-but-types">{{ a.actorTag }}</p>
						</div>
					</div>
					<div class="but">
						<p class="but-text">{{ a.title }}</p>
						<div class="price">
							<div class="price-item">
								<span>{{ a.discountPrice.first }}</span>
								<div class="big">{{ a.discountPrice.big }}</div>
								.
								<div class="small">{{ a.discountPrice.small }}</div>
								<van-image
									class="imglogo"
									width="22"
									height="12"
									src="https://s10.mogucdn.com/mlcdn/c45406/200928_043cgf54cjia5d88gfj5j626id541_66x36.png"
								/>
							</div>
							<div class="sales-num">{{ a.sale }}</div>
						</div>
					</div>
				</div>
			</div>					
			<div class="right" >
				<div class="ited" v-for="a in ListRight" :key="a.Id" @click="gotoVideo(a)">
					<div class="top">
						<van-image class="img" width="100" :src="a.itemImage" />
						<van-image v-show=" a.lefttop_taglist.length !== 0" class="direct_seeding" width="44" height="36" :src=" a.lefttop_taglist.length == 0 ? '' : a.lefttop_taglist[0].img" />
						<van-image class="broadcast" width="28" height="28" src="https://s10.mogucdn.com/mlcdn/c45406/190717_0a48k9jegh3a0gg2gfgaf3j24bij0_84x84.png" />
						<div class="img-but">
							<van-image class="img-but-tu" width="17.4" height="17.4" :src="a.actorAvatar" />
							<span class="img-but-text">{{ a.actorName }}</span>
							<p class="img-but-types">{{ a.actorTag }}</p>
						</div>
					</div>
					<div class="but">
						<p class="but-text">{{ a.title }}</p>
						<div class="price">
							<div class="price-item">
								<span>{{ a.discountPrice.first }}</span>
								<div class="big">{{ a.discountPrice.big }}</div>
								.
								<div class="small">{{ a.discountPrice.small }}</div>
								<van-image
									class="imglogo"
									width="22"
									height="12"
									src="https://s10.mogucdn.com/mlcdn/c45406/200928_043cgf54cjia5d88gfj5j626id541_66x36.png"
								/>
							</div>
							<div class="sales-num">{{ a.sale }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchView from "../../components/SearchView.vue";
import {tabulationAPI, NavigationAPI} from "../../api/home";
import debounce from "lodash.debounce"; //防抖
export default {
	name: "HomeView",
	components: {
		SearchView,
	},
	data() {
		return {
			// 存列表数据
			list: [],
			// 存导航左列数据
			indexLeft:2,
			ListLeft:[],
			// 存导航右列数据
			indexRight: 5,
			ListRight: [],
		};
	},
	// console.log();
	methods:{
		// 导航
		async tabulationlists() {
			let url = tabulationAPI;
			let {data} = await this.$axios(url);
			console.log(data);
			this.list = data;
		},
		// 左列数据
		async NavigationListsLeft() {
			let url = NavigationAPI(this.indexLeft);
			let {data} = await this.$axios(url);
			let obj = data.data.list;
			// ￥ 切割 
			for(let i = 0; i<obj.length ;i++){
				let peiceleft = obj[i].discountPrice
				let price = {
					first: peiceleft.split(".")[0].split("")[0],
					big: peiceleft.split(".")[0].split("¥").splice(1, 2)[0],
					small: this.PriceAddZero(peiceleft.split(".")[1]),
				};
				obj[i].discountPrice = price;
			}
			let arr = [...this.ListLeft,...obj]
			this.ListLeft = arr
			
		},
		// 右列数据
		async NavigationListsRight() {
			let url = NavigationAPI(this.indexRight);
			let {data} = await this.$axios(url);
			let obj = data.data.list;
			// ￥ 切割
			for (let i = 0; i < obj.length; i++) {
				let peiceleft = obj[i].discountPrice;
				let price = {
					first: peiceleft.split(".")[0].split("")[0],
					big: peiceleft.split(".")[0].split("¥").splice(1, 2)[0],
					small: this.PriceAddZero(peiceleft.split(".")[1]),
				};
				obj[i].discountPrice = price;
			}
			let arr = [...this.ListRight, ...obj];
			this.ListRight = arr;
		},
		// 给价格加零
		PriceAddZero(price) {
			if (price == undefined) {
				return "00";
			} else if (price.length == 1) {
				return (price = price.split("").length < 2 ? price + "0" : price);
			} else if (price.length == 2) {
				return price;
			}
		},
		onScroll() {
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			//变量windowHeight是可视区的高度
			let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
			//变量scrollHeight是滚动条的总高度
			let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
			if (Math.ceil(scrollTop) + windowHeight >= scrollHeight) {
				this.debouncedCallback();
			}
		},
		// 点击列表跳转到搜索结果页
        gotoresult(title){
            this.$router.push({
                name:'SearchResult',
                query:{
                    text:title,
                }
            })
        },
		// 点击跳转到视频
		gotoVideo(list){
			this.$router.push({
                name:'VideoView',
				params:{
					list,
				}
            })
		}
	},
	mounted() {
		this.tabulationlists();
		this.NavigationListsLeft();
		this.NavigationListsRight();
		//开启滚动事件
		window.addEventListener("scroll", this.onScroll);
		this.debouncedCallback = debounce(() => {
			this.indexLeft += 2;
			this.indexRight += 2;
			this.NavigationListsLeft();
			this.NavigationListsRight();
		}, 10);
	},
};
</script>
<style lang="scss" scoped>
.home {
	.tabulation {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		.item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 5px 0px;
			.img {
				width: 50px;
				height: 50px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			p {
				font-size: 12.5px;
				color: #666;
				margin: 3.5px 0px 0px;
			}
		}
	}
	.navigation {
		width: 100%;
		background-color: #f6f6f6;
		box-sizing: border-box;
		padding: 12px 7.5px;
		display: flex;
		.left {
			width: 50%;
			box-sizing: border-box;
			.ited {
				margin: 0px 4.5px 9px;
				background-color: #fff;

				.top {
					position: relative;
					.img {
						min-width: 100%;
						display: block;
					}
					.direct_seeding {
						position: absolute;
						top: 9px;
						left: 8px;
					}
					.broadcast {
						position: absolute;
						top: 5px;
						right: 5px;
					}
					.img-but {
						position: absolute;
						left: 0px;
						bottom: 0px;
						width: 100%;
						display: flex;
						height: 37px;
						align-items: center;
						justify-content: flex-start;
						.img-but-tu {
							margin-left: 10px;
							border-radius: 50%;
							overflow: hidden;
							border: 1px solid #fff;
						}
						.img-but-text {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 12px;
							margin: 0px 0px 0px 5px;
							color: #fff;
							margin-left: 5px;
						}
						.img-but-types {
							height: 20px;
							padding: 0.5px 4px;
							border-radius: 2.5px;
							background-color: rgba(0, 0, 0, 0.4);
							color: #fff;
							font-size: 4px;
							white-space: nowrap;
							margin-left: 15px;
							border: 0.5px solid transparent;
						}
					}
				}
				.but {
					width: 100%;
					box-sizing: border-box;
					padding: 9px;
					background-color: #fff;
					.but-text {
						font-size: 13px;
						color: #333;
						margin-bottom: 10px;
						margin: 0px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						span {
							font-size: 12px;
							color: #ff4466;
							margin-right: 2px;
						}
						.price-item {
							margin: 0px;
							font-size: 16px;
							color: #ff4466;
							display: flex;
							align-items: center;
							span {
								font-size: 12px;
								color: #ff4466;
								margin-right: 2px;
							}
							.big {
								font-size: 16px;
								color: #ff4466;
							}
							.small {
								font-size: 12px;
								color: #ff4466;
							}
							.imglogo {
								margin: 0px 0px 0px 3px;
							}
						}
						.sales-num {
							padding: 2.5px 6px;
							font-size: 12px;
							color: #ff4466;
							background-color: #ffecef;
							border-radius: 14px;
						}
					}
				}
			}
		}
		.right {
			width: 50%;
			box-sizing: border-box;
			.ited {
				margin: 0px 4.5px 9px;
				background-color: #fff;

				.top {
					position: relative;
					.img {
						min-width: 100%;
						display: block;
					}
					.direct_seeding {
						position: absolute;
						top: 9px;
						left: 8px;
					}
					.broadcast {
						position: absolute;
						top: 5px;
						right: 5px;
					}
					.img-but {
						position: absolute;
						left: 0px;
						bottom: 0px;
						width: 100%;
						display: flex;
						height: 37px;
						align-items: center;
						justify-content: flex-start;
						.img-but-tu {
							margin-left: 10px;
							border-radius: 50%;
							overflow: hidden;
							border: 1px solid #fff;
						}
						.img-but-text {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 12px;
							margin: 0px 0px 0px 5px;
							color: #fff;
							margin-left: 5px;
						}
						.img-but-types {
							height: 20px;
							padding: 0.5px 4px;
							border-radius: 2.5px;
							background-color: rgba(0, 0, 0, 0.4);
							color: #fff;
							font-size: 4px;
							white-space: nowrap;
							margin-left: 15px;
							border: 0.5px solid transparent;
						}
					}
				}
				.but {
					width: 100%;
					box-sizing: border-box;
					padding: 9px;
					background-color: #fff;
					.but-text {
						font-size: 13px;
						color: #333;
						margin-bottom: 10px;
						margin: 0px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						span {
							font-size: 12px;
							color: #ff4466;
							margin-right: 2px;
						}
						.price-item {
							margin: 0px;
							font-size: 16px;
							color: #ff4466;
							display: flex;
							align-items: center;
							span {
								font-size: 12px;
								color: #ff4466;
								margin-right: 2px;
							}
							.big {
								font-size: 16px;
								color: #ff4466;
							}
							.small {
								font-size: 12px;
								color: #ff4466;
							}
							.imglogo {
								margin: 0px 0px 0px 3px;
							}
						}
						.sales-num {
							padding: 2.5px 6px;
							font-size: 12px;
							color: #ff4466;
							background-color: #ffecef;
							border-radius: 14px;
						}
					}
				}
			}
		}
	}
}
</style>
